<template>
	<view id="box">
		<view class="icon">
			<image class="icon_img" src="../../static/login/nav_icon.svg"></image>
		</view>
		<view class="trunk">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item required label="手机号:" name="phone">
					<uni-easyinput :inputBorder="false" v-model="formData.phone" class="input_val" type="number"
						placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item v-if="!isQuickLogin" required label="密码:" name="password">
					<uni-easyinput :inputBorder="false" v-model="formData.password" class="input_val" type="password"
						placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item v-if="isQuickLogin" required label="验证码" name="code" class="input_label code">
					<uni-easyinput :inputBorder="false" class="input_value code_img" type="number"
						v-model="formData.code" placeholder="请输入验证码" maxlength="6" clearSize="0" />
					<text class="send_code" v-if="!isCode" @click="sendCode">{{content}}</text>
					<text class="code_time" v-if="isCode">{{content}}</text>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="span">
			<text class="right" v-if="!isQuickLogin" @click="toPhoneCodeLogin">
				快速登录/注册
			</text>
			<text class="right" v-if="isQuickLogin" @click="toPhonePwdLogin">
				密码登录
			</text>
			<text class="left" @click="forgetPassword">
				忘记密码？
			</text>
			<button @click="formSubmit" class="btn">登录</button>
			<view class="create">
				<view class="c_create">
					<view class="establish">
						<text class="establish_use" @click="createUser">创建用户</text>
					</view>
					<view class="other_log">
						<view class="other_use">其他登录方式</view>
						<view class="other_img">
							<text class="wx_img">
								<image class="icon_image" @click="WXlogin" src="../../static/login/weixindenglu.svg"></image>
							</text>
							<text class="qq_img">
								<image class="icon_image" @click="QQlogin" src="../../static/login/QQdenglu_1.svg"></image>
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="register">
				<view class="re_center">
					<text class="register_text">注册即代表你同意</text>
					<view class="register_btn" @click="toUserAgreement">《思云课堂用户服务协议》</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLogin
	} from '@/static/login/http/getData.js'
	
	import {
		sendCode
	} from '@/static/login/http/getData.js'

	import {
		getLoginByPhone
	} from '@/static/login/http/getData.js'
	
	import {
		getOraddWx
	} from '@/static/login/http/getData.js'
	
	import {
		getOraddQQ
	} from '@/static/login/http/getData.js'
	
	export default {
		data() {
			return {
				formData: {
					phone: '',
					password: '',
					code:'',
				},
				rules: {
					// 对phone字段进行必填验证
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
								errorMessage: '请输入正确手机号',
							}
						]
					},
					// 对password字段进行必填验证
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}, ]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}, ]
					},
				},
				//验证码文字
				content: '发送验证码',
				//验证码
				code: '123456',
				//定时器
				clock: '',
				//验证码倒计时时间
				timeout: 60,
				//倒计时期间隐藏可以点击的获取验证码
				isCode: false,
				//快速登录
				isQuickLogin: false,
			}
		},
		mounted() {
			//调用登录成功后的方法
			 this.getUserInfo(); 
		},
		methods: {
			//登录成功调用跳转到首页部分
			getUserInfo() {
				var user = JSON.parse(uni.getStorageSync('token'));
				if (user != null) {

					uni.switchTab({
						url: '/pages/index/index-index'
					})
					uni.redirectTo({
						url: '/pages/index/index-index'
					});
					
				}
			},
			formSubmit(e) {
				this.$refs.form.validate().then(res => {
					if (this.formData.code != '') {
						/* 通过手机验证码登录 */
						if (this.formData.code == this.code) {
							getLoginByPhone(res).then(res => {
								// 打印调用成功回调
								console.log(res.data.data)
								//存值
								uni.setStorageSync('token', JSON.stringify(res.data.data));
								uni.showToast({
									title: '登录成功',
									duration: 2000
								});
								this.getUserInfo();
							}).catch(e => {
								uni.showToast({
									title: '登录失败',
									icon: 'error',
									duration: 2000
								});
							})
						} else {
							uni.showToast({
								title: '验证码错误',
								icon: 'error',
								duration: 2000
							});
						}
					} else {
						/* 通过手机号和密码登录 */
						this.formData = {
							phone: res.phone,
							password: res.password
						}
						getLogin(this.formData).then(res => {
							console.log(res);
							uni.setStorageSync('token', JSON.stringify(res.data.data));
							uni.showToast({
								title: '登录成功',
								duration: 2000
							});
							 this.getUserInfo();
						}).catch(e => {
							uni.showToast({
								title: '登录失败',
								icon: 'error',
								duration: 2000
							});
						});
					}
				})
			},
			//手机验证码登录
			sendCode() {
				this.$refs.form.validateField(['phone']).then(res => {
					sendCode(res).then(res => {
						this.code = res.data.data
						this.getCountdown();
					})
				}).catch(e => {
					uni.showToast({
						title: '手机号错误',
						icon: 'error',
						duration: 2000
					});
				})
			},
			//验证码倒计时
			getCountdown() {
				this.isCode = true;
				this.clock = window.setInterval(() => {
					this.content = this.timeout + 's后可重新发送';
					this.timeout--;
					if (this.timeout < 0) {
						this.timeout = 60;
						this.isCode = false;
						this.content = "重新发送验证码";
						window.clearInterval(this.clock);
					}
				}, 1000)
			},
			//微信登录
			WXlogin(){
				uni.login({
					provider:'weixin',
					success: function(loginRes){
						//打印登录成功后信息
						console.log(loginRes.authResult);
						uni.getUserInfo({
							provider: 'weixin',
							success:function(res){
								var data = {
									openId : res.userInfo.openId,
									nickName : res.userInfo.nickName,
									avatarUrl :res.userInfo.avatarUrl,
								}
								getOraddWx(data).then(res => {
									uni.showToast({
										title: '登录成功',
										duration: 2000
									})
									 this.getUserInfo();
								});
							}
						})
					}
				})
			},
			//QQ登录
			QQlogin(){
				uni.login({
					provider: 'qq',
					success:function(loginRes){
						//打印登录成功后信息
						console.log(loginRes.authResult);
						uni.getUserInfo({
							provider: 'qq',
							success:function(res){
								var data = {
									openId : res.userInfo.openId,
									nickName : res.userInfo.nickName,
									avatarUrl :res.userInfo.avatarUrl,
								}
								getOraddQQ(data).then(res => {
									console.log(res);
									uni.showToast({
										title: '登录成功',
										duration: 2000
									})
									 this.getUserInfo();
								})
							}
						})
					}
				});
			},
			//通过手机验证码快速登录
			toPhoneCodeLogin() {
				this.isQuickLogin = true;
			},
			//通过手机号密码登录
			toPhonePwdLogin() {
				this.isQuickLogin = false;
			},
			toUserAgreement() {
				//跳转到用户协议
				uni.navigateTo({
					url: '/pages/login/userAgreement'
				});
			},
			forgetPassword() {
				//重置密码
				uni.navigateTo({
					url: '/pages/login/forgetPassword'
				});
			},
			createUser() {
				//注册用户
				uni.navigateTo({
					url: '/pages/login/createUser'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	#box {
		width: 84%;
		margin: 0 auto;
	}

	.icon {
		margin: 20% auto;
		width: 70px;
	}

	.icon .icon_img {
		width: 70px;
		height: 70px;
	}

	.uniui-color {
		color: #EC7983;
	}

	.trunk {
		width: 84%;
		margin: 0 auto;
	}

	.uni-forms-item {
		height: 35px;
		margin-top: 10px;
		border-bottom: 1px solid #ebebeb;
	}

	.span {
		width: 84%;
		margin: 10px auto;
	}

	.span .left {
		float: right;
	}

	.span .right {
		color: #1ABC9C;
	}

	.span .btn {
		margin-top: 20px;
		background-color: #1ABC9C;
		color: #fff;
	}

	.span .establish {
		width: 31%;
		margin: 0 auto;
		margin-top: 20px;
		text-align: center;
	}

	.span .establish .establish_use {
		font-size: 15px;
		color: #1ABC9C;
	}

	.span .other_log {
		width: 84%;
		margin: 0 auto;
		margin-top: 20px;
	}

	.span .create .c_create{
		width: 84%;
		margin: 0 auto;
	}
	
	.span .other_log .other_use {
		width: 49%;
		margin: 0 auto;
		font-size: 14px;
		text-align: center;
		color: #bcb9b6;
	}

	.span .other_log .other_img .icon_image {
		width: 50px;
		height: 50px;
		margin-top: 25px;
	}

	.span .other_log .other_img .qq_img {
		float: right;
	}

	.span .register {
		width: 84%;
		margin: 25px auto;
	}

	.span .register .re_center{
		width: 97%;
		margin: 0 auto;
		text-align: center;
	}
	.span .register .register_text {
		color: #bcb9b6;
		font-size: 13px;
		text-align: center;
	}

	.span .register .register_btn {	
		margin: 0 auto;
		margin-top: 5px;
		font-size: 15px;
		color: #617AA1;
		text-align: center;
	}

	.send_code {
		position: absolute;
		top: 5px;
		right: 0;
		color: #1ABC9C;
	}

	.code_time {
		position: absolute;
		top: 5px;
		right: 0;
		color: #999999;
	}
</style>
